<template>
  <el-select v-model="enumVal" :placeholder="props.title" :clearable="true" :style="'width: ' + props.customWidth + ';'" @change="handleChange">
    <el-option v-for="item in enums" :key="item.code" :value="item.code" :label="item.desc" />
  </el-select>
</template>

<script setup>
  import { onMounted, ref, toRefs, watch } from 'vue'
  import { getEnumList } from '@/utils/enum'

  const props = defineProps({
    modelValue: { type: [String, Number, Boolean], default: undefined },
    enumName: { type: String, default: '' },
    customList: { type: Array, default: () => [] },
    customWidth: { type: String, default: '200px' },
    title: { type: String, default: '请选择' }
  })

  const { modelValue } = toRefs(props)
  const enumVal = ref(props.modelValue)
  watch(modelValue, (newValue) => {
    enumVal.value = newValue
  })

  const emit = defineEmits(['update:modelValue'])

  function handleChange(item) {
    emit('update:modelValue', item)
  }

  const enums = ref([])
  onMounted(async () => {
    if (props.enumName) {
      enums.value = await getEnumList(props.enumName)
    }
    if (props.customList.length > 0) {
      enums.value = props.customList
    }
  })
</script>
